<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/reset.css" />
    <!-- 引入样式重置 -->
    <style>
      [v-cloak] {
        display: none;
      }
      s {
        text-decoration: none;
      }
      i {
        font-style: normal;
      }
      #app {
        width: 1100px;
        margin: 50px auto;
      }
      .add {
        border: 1px solid rgb(89, 180, 176);
        border-radius: 6px;
      }
      .add > h3 {
        color: #fff;
        font-weight: normal;
        height: 50px;
        line-height: 50px;
        background: rgb(89, 180, 176);
        padding-left: 20px;
      }

      .add > .main {
        display: flex;
        justify-content: space-around;
      }
      .main > li {
        display: flex;
        height: 50px;
        align-items: center;
      }
      .main > li > .btn {
        color: #fff;
        background: rgb(89, 180, 176);
        padding: 6px;
        border-radius: 6px;
      }
      .main > li > input {
        height: 30px;
        width: 230px;
      }

      .list {
        margin-top: 30px;
      }
      .list > li {
        display: flex;
        height: 40px;
        align-items: center;
        border-left: 1px solid #ccc;
      }
      .list > li:first-child {
        border-top: 1px solid #ccc;
      }
      .list > li:nth-child(2n) {
        background-color: #f2f2f2;
      }
      .list > li > span {
        width: 10%;
      }
      .list > li > * {
        height: 40px;
        line-height: 40px;
        text-indent: 10px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
      }
      .list > li > em {
        width: 20%;
      }
      .list > li > i {
        width: 25%;
      }
      .list > li > s {
        width: 45%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="add">
        <h3>添加品牌</h3>
        <ul class="main">
          <li>
            <label for="idnum">Id：</label>
            <input type="text" id="idnum" disabled />
          </li>
          <li>
            <label for="idname">Name：</label>
            <input type="text" id="idname" v-model="name" />
            <!-- 双向数据绑定 data里的name变量 -->
          </li>
          <li><a href="#" class="btn" @click="add">添加</a></li>
          <!-- 点击添加执行add添加方法 -->
          <li>
            <label for="key">搜索名称关键字：</label>
            <input type="text" id="key" v-model="keyword" />
          </li>
        </ul>
      </div>

      <ul class="list">
        <li>
          <span>Id</span>
          <em>Name</em>
          <s>Ctime</s>
          <i>Operation</i>
        </li>
        <li v-for="(item,index) in search" :key="item.id">
          <span v-cloak>{{item.id}}</span>
          <em v-cloak>{{item.name}}</em>
          <s v-cloak>{{item.date }}</s>
          <i @click="remove(index)">删除</i>
        </li>
      </ul>
    </div>
    <script src="lib/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          arr: [
            { id: 1, name: "奔驰", date: new Date() },
            { id: 2, name: "宝马", date: new Date() },
            { id: 3, name: "法拉利", date: new Date() },
            { id: 4, name: "劳斯莱斯", date: new Date() },
          ],
          // 商品的初始数据
          name: "", //输入的商品名称
          keyword: "", //搜索关键字
        },
        methods: {
          add() {
            this.arr.push({
              id: this.arr.length + 1,
              name: this.name,
              date: new Date(),
            });
          },
          // 添加商品方法
          remove(index) {
            this.arr.splice(index, 1);
          },
          // 删除商品方法
        },
        computed: {
          search() {
            return this.arr.filter((item) => {
              return item.name.includes(this.keyword);
            });
          },
          // 过滤的计算属性
        },
      });
    </script>
  </body>
</html>
